<!-- 号码一个一个出 -->
<template>
    <div class="divnn">
        <div class="shiyong">技术提供试用</div>
        <!-- 抽奖整个环节是否结束  hasover为true 表示结束了 -->
        <div v-if="hasover">
            <div class="boxs">
                <img class="wenzi" src="../../assets/reslut.png" style="width: 1300px">
                <div class="lottery_scroll_box_1_mian">
                    <!-- 以下是抽奖出幸运号码 有20个幸运号码  抽了20个号码之后 在显示在flex22这个下面的itemtxts这个里里面-->
                    <ul class="lottery_scroll_1 flex11" style="width: 1314px;">
                        <li class="lottery_items" v-for="(num, index) in luckyNumbers" :key="index"
                            style="width:14%;line-height: 144px;">
                            <div class="bigyuan">
                                <img class="yuan" src="../../assets/usercircle4.png">
                                <span class="itemtxts">{{ num }}</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div v-if="!hasover">
            <!-- 还没开始抽奖 最开始的时候 -->
            <div class="boxs" v-if="!starts && isthebegin == false">
                <img class="wenzi" src="../../assets/wenzi2.png">
                <img class="title" src="../../assets/xyhtitle.png">
                <img class="kaishi" @click="playAudio" src="../../assets/startbtn3.png">
            </div>
            <div class="boxs" v-if="starts && hasStop == false">
                <!-- <img class="wenzi" src="../../assets/wenzi2.png"> -->

                <div class="lottery_scroll_box_1_mian" :class="starts ? 'showstart' : 'noshow'">
                    <!-- 随机生成1到880数字  快速闪速渲染在 下面的itemtxts 里面-->
                    <ul class="lottery_scroll_1">
                        <li class="lottery_items" v-for="(num, index) in randomNumbers" :key="index">
                            <div class="bigyuan">
                                <img class="yuan" src="../../assets/usercircle4.png">
                                <span class="itemtxts" style="font-size:3vw">{{ num }}</span>
                            </div>
                        </li>
                    </ul>
                </div>

                <!-- 这个是开始抽奖的按钮 -->
                <img class="kaishi" style="margin-top:100px" @click="stopchou" src="../../assets/stopbtn.png">
            </div>
            <div class="boxs" v-if="starts && hasStop == true">
                <div class="tops">
                    <img class="jiang" src="../../assets/winerbg2.png">
                    <!-- 这个是每轮抽奖结束的关闭按钮 点击这个表示进入下一轮 -->
                    <img class="close" src="../../assets/closebtn2.png" @click="closeto">
                </div>
                <div class="shuzi lottery_item">
                    <img class="itemquan" src="../../assets/usercircle4.png">
                    <!-- 按停止按钮的时候 把一个1到880的数字显示在9500  当显示20次的时候 代表抽奖结束-->
                    <span class="itemtxt">{{ currentLuckyNumber }}</span>
                </div>

                <p style="font-size: 30px;color:white;margin-top:20px">当前第{{ luckyNumbers.length }}个幸运号码</p>
            </div>
        </div>
        <video v-if="!starts && isthebegin == true" src="https://5201314qaz.oss-cn-beijing.aliyuncs.com/ls/bgg.mp4"
            style="object-fit:fill;" autoplay="autoplay" autobuffer="" autoloop="" loop="" width="100%"
            height="100%"></video>
        <video v-if="!starts && isthebegin == false" src="https://5201314qaz.oss-cn-beijing.aliyuncs.com/ls/bgg2.mp4"
            style="object-fit:fill;" autoplay="autoplay" autobuffer="" autoloop="" loop="" width="100%"
            height="100%"></video>

        <video v-if="starts && isthebegin == false" src="https://s.17iu8.com/res/video/81.mp4" style="object-fit:fill;"
            autoplay="autoplay" autobuffer="" autoloop="" loop="" width="100%" height="100%"></video>



    </div>
</template>

<script>
import axios from 'axios';
// 接收消息的组件
import { EventBus } from '../event-bus.js'
export default {
    name: "indexS",
    data() {
        return {
            isthebegin: false,
            hasover: false,//是否整个抽奖结束
            hasStop: false,//单轮抽奖停止
            audio: null,
            starts: false,//开始进入抽奖环节
            randomNumbers: [], // 快速滚动的随机数数组
            currentLuckyNumber: null, // 当前抽中的幸运号码
            luckyNumbers: [], // 所有已抽中的幸运号码
            randomInterval: null, // 随机数生成定时器
            maxLuckyNumbers: 20 // 最大抽奖数量
        };
    },
    computed: {
    },
    components: {},
    created() {
        setTimeout(() => {
            this.isthebegin = false
        }, 17000);
    },
    mounted() {
        // 创建音频对象
        this.audio = new Audio('https://s.17iu8.com/res/music/lottery3.mp3');
        this.audio.loop = true;
    },
    beforeDestroy() {
        this.cleanup();
    },
    destroyed() {
        this.cleanup();
    },
    methods: {
        cleanup() {
            this.cleanupAudio();
            this.stopRandomGenerator();
        },
        closeto() {
            // 检查是否已经抽完20个号码
            if (this.luckyNumbers.length >= this.maxLuckyNumbers) {
                this.hasover = true;
                return;
            }

            this.hasStop = false;
            this.startRandomGenerator();
        },
        cleanupAudio() {
            if (this.audio) {
                this.audio.pause();
                this.audio.currentTime = 0;
                // 释放资源
                this.audio.src = '';
                this.audio = null;
            }
        },
        stopchou() {
            this.stopRandomGenerator();
            this.generateLuckyNumber();
            this.hasStop = true;
        },
        playAudio() {
            this.starts = true;
            this.audio.play().catch(e => {
                console.error("播放失败:", e);
            });
            this.startRandomGenerator();
        },
        // 开始生成随机数
        startRandomGenerator() {
            this.stopRandomGenerator();
            this.randomInterval = setInterval(() => {
                const newNumbers = [];
                for (let i = 0; i < 10; i++) {
                    // 生成1-880的随机数，且不包含已抽中的号码
                    let num;
                    do {
                        num = Math.floor(Math.random() * 880) + 1;
                    } while (this.luckyNumbers.includes(num));
                    newNumbers.push(num);
                }
                this.randomNumbers = newNumbers;
            }, 100); // 每100毫秒更新一次数字，实现快速滚动效果
        },
        // 停止生成随机数
        stopRandomGenerator() {
            if (this.randomInterval) {
                clearInterval(this.randomInterval);
                this.randomInterval = null;
            }
        },
        // 生成幸运号码
        generateLuckyNumber() {
            // 从当前显示的随机数中随机选一个作为幸运号码
            const randomIndex = Math.floor(Math.random() * this.randomNumbers.length);
            this.currentLuckyNumber = this.randomNumbers[randomIndex];

            // 添加到幸运号码列表，确保不重复
            if (!this.luckyNumbers.includes(this.currentLuckyNumber)) {
                this.luckyNumbers.push(this.currentLuckyNumber);
            } else {
                // 如果意外重复，重新生成一个
                this.generateLuckyNumber();
            }
        }
    },
};
</script>

<style scoped>
/* 保持原有样式不变 */
.tops {
    justify-items: center;
    width: 1500px;
    justify-content: center;
    position: relative;
    margin: 0 auto;
}

.close {
    position: absolute;
    right: 0;
    display: block;
    width: 80px;
    height: 80px;
    top: 120px
}

.btn1 {
    height: 0px;
    opacity: 1;
    transition: all 0.3s;
}

.btn2 {
    height: 50px;
    opacity: 0;
    transition: all 0.3s;
}

.noshow {
    opacity: 0;
    height: 0px;
    transition: all 0.3s;
}

.showstart {
    transition: all 0.3s;
    opacity: 1;
    height: 600px;
}

.bigyuan {
    position: relative;
}

.lottery_scroll_1 {
    width: 1500px;
    margin: 0 auto;
    overflow: hidden;
}

.bigyuan {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    margin: 20px;
}

.bigyuan img {
    width: 100%;
    height: 100%;
    animation: turn 6s linear infinite;
}

@keyframes turn {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
    }
}

.lottery_items {
    width: 20%;
    display: block;
    float: left;
}

.flex22 .lottery_items {
    width: 20%;
    display: block;
    float: left;
}

.flex22 .lottery_items .itemtxts {
    line-height: 190px !important;
    font-size: 40px;
}

.wenzi {
    display: block;
    width: 90%;
    margin: 0 auto;
}

.boxs {
    position: absolute;
    width: 100%;
    z-index: 99;
    top: 50%;
    transform: translateY(-50%);
}

.kaishi {
    width: 400px;
    display: block;
    margin: 0 auto;
    margin-top: 50px;
    cursor: pointer;
}

.jiang {
    width: 100%;
    margin: 0 auto;
}

.shuzi {
    margin: 0 auto;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    position: relative;
    margin-top: 10vh;
}

.itemtxts {
    position: absolute;
    text-align: center;
    line-height: 280px;
    width: 100%;
    left: 0;
    top: 0;
    font-size: 2vw;
    color: rgb(255, 248, 184);
    letter-spacing: 2px;
    text-shadow: rgb(255, 129, 1) 0px 1px, rgb(255, 129, 1) 0px 2px, rgb(255, 129, 1) 0px 3px, rgb(255, 129, 1) 0px 5px, rgba(255, 0, 0, 0.65) 0px 10px 10px, rgba(255, 0, 0, 0.65) 0px 0px 10px, rgba(255, 0, 0, 0.65) 0px 0px 15px, rgba(255, 0, 0, 0.65) 0px 0px 20px;
}

.itemtxt {
    position: absolute;
    text-align: center;
    line-height: 400px;
    width: 100%;
    left: 0;
    font-size: 3vw;
    color: rgb(255, 248, 184);
    letter-spacing: 2px;
    text-shadow: rgb(255, 129, 1) 0px 1px, rgb(255, 129, 1) 0px 2px, rgb(255, 129, 1) 0px 3px, rgb(255, 129, 1) 0px 5px, rgba(255, 0, 0, 0.65) 0px 10px 10px, rgba(255, 0, 0, 0.65) 0px 0px 10px, rgba(255, 0, 0, 0.65) 0px 0px 15px, rgba(255, 0, 0, 0.65) 0px 0px 20px;
}

.itemquan {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    animation: turn 6s linear infinite;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    display: block;
}

@keyframes turn {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
    }
}

video {
    width: 100%;
    height: 100vh;
    z-index: 1;
}

.shiyong {
    position: fixed;
    top: 200px;
    font-size: 40px;
    color: white;
}

.divnn {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
}
</style>